<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <script src="js/rem_32.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/shoplist.css">
</head>

<body>
    <div class="container">
        <!-- 遮罩 -->
        <div class="shade">
            <div class="product_standard">
                <div class="close">
                    <img src="images/product_list/close.png" height="15" alt="">
                </div>
                <div class="lipstick">
                    <img src="images/product_list/lipstick.png" alt="">
                    <div class="txt">
                        <p class="title">依泉润唇膏套装 保湿滋润补水物色防干裂 唇部护理唇膜淡化唇纹</p>
                        <p class="price">¥<span>98.9</span></p>
                        <p class="inventory">库存1908件</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="cpgg">
                    <p>产品规格</p>
                    <ul>
                        <li><a href="#" class="a2 active">8g/ml</a></li>
                        <li><a href="#" class="a2">4g/ml</a></li>
                    </ul>
                </div>
                <div class="line"></div>
                <div class="gmsl">
                    <span>购买数量</span>
                    <div>
                        <a href="javascript:;" id="remove">-</a>
                        <i id="num">1</i>
                        <a href="javascript:;" id="add">+</a>
                    </div>
                </div>
                <div class="line"></div>

                <button class="jrgwc">加入购物车</button>
            </div>
        </div>
        <header>
            <img height="20" src="images/product_list/white_left_arrow.png" alt="">
            <div class="div_input">
                <img height="16" src="images/product_list/input_seach.png" alt="">
                <input type="text" placeholder="请输入搜索内容">
            </div>
        </header>
        <div class="wrapper">
            <div class="items" >
                <div class="img_div">
                    <img src="images/product_list/ping_pong.png" alt="">
                </div>
                <div class="text_div">
                    <p class="title">红双喜乒乓球三星级赛顶3星有缝比赛乒乓球白黄色10只装新材料D40+</p>
                    <p class="price">¥<span>15.8</span></p>
                    <div class="flex">
                        <span>月销量：5</span>
                        <a href="javascript:;" class="a_jrgwc">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="items" >
                <div class="img_div">
                    <img src="images/product_list/paiqiu.png" alt="">
                </div>
                <div class="text_div">
                    <p class="title">正品红双喜排球5号充气软式中考学生比赛用成人男女排球考试训练+</p>
                    <p class="price">¥<span>39.9</span></p>
                    <div class="flex">
                        <span>月销量：5</span>
                        <a href="javascript:;" class="a_jrgwc">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="items" >
                <div class="img_div">
                    <img src="images/product_list/zuqiu.png" alt="">
                </div>
                <div class="text_div">
                    <p class="title">李宁篮球成人青少年7号5号室内外水泥街头中小学生比赛训练球耐磨+</p>
                    <p class="price">¥<span>15.8</span></p>
                    <div class="flex">
                        <span>月销量：5</span>
                        <a href="javascript:;" class="a_jrgwc">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="items" >
                <div class="img_div">
                    <img src="images/product_list/children_basketball.png" alt="">
                </div>
                <div class="text_div">
                    <p class="title">红双喜4号5号足球正品3号儿童中小学体育标准学校训练耐磨足球+</p>
                    <p class="price">¥<span>15.8</span></p>
                    <div class="flex">
                        <span>月销量：5</span>
                        <a href="javascript:;" class="a_jrgwc">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="items" >
                <div class="img_div">
                    <img src="images/product_list/children_basketball.png" alt="">
                </div>
                <div class="text_div">
                    <p class="title">红双喜乒乓球三星级赛顶3星有缝比赛乒乓球白黄色10只装新材料D40+</p>
                    <p class="price">¥<span>15.8</span></p>
                    <div class="flex">
                        <span>月销量：5</span>
                        <a href="javascript:;" class="a_jrgwc">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>

        goNext('.jrgwc','./shopcart.html')
        goBack('header>img')
        focus('input')

        function focus(obj){
            document.querySelector(obj).onfocus = function(){
                location='searchtwo.html'
            }
        }


        function joinshopping() {
            var items = document.querySelectorAll('.wrapper .items');
            var shade = document.querySelector('.shade');
            var close = document.querySelector('img[src="images/product_list/close.png"]');
            var a_jrgwc = document.querySelectorAll('.a_jrgwc');
            for (let i = 0; i < a_jrgwc.length; i++) {
                const el = a_jrgwc[i];
                el.onclick = function () {
                    shade.style.display = 'block';
                }
                close.onclick = function () {
                    shade.style.display = 'none';
                }
            }
            for (let i = 0; i < items.length; i++) {
                const els = items[i];
                els.addEventListener('click', function (e) {
                    if (e.target.nodeName === 'A') {
                        shade.style.display = 'block';
                        e.preventDefault();//阻止默认行为
                        e.stopPropagation();//阻止冒泡
                        return false
                    }else{
                        location.href = 'details.html';
                        console.log(222);
                    }
                 
                })
            }
          
        }
        joinshopping()
        function count(add,num,remove) {
            var add = document.getElementById(add);//+
            var num = document.getElementById(num);//变化的数字
            var remove = document.getElementById(remove);//-
            var x = 1;//计数，默认等于1
            var max = 5;
            var min = 0;
            //加
            add.onclick = function(){
                num.innerHTML++
                x++;
                if (x>max) {
                    x = max;
                }
                num.innerHTML = x
            }
            remove.onclick = function(){
                num.innerHTML--
                x--;
                if (x<min) {
                    x = min;
                }
                num.innerHTML = x
            }
        }   
        count('add','num','remove');
        //加入购车点击切换效果
        function a2(el) {
            console.log(as);
            var as = document.querySelectorAll(el);
            for (let i = 0; i < as.length; i++) {
                as[i].onclick = function(){
                    for (let i = 0; i < as.length; i++) {
                        as[i].classList.remove('active')
                    }
                    this.classList.add('active');
                }
                
            }
        }
         a2('.a2');
/* ---------------------------------------------------------------------- */
        //工厂函数
        function createObject(name, age, sex) {
            var obj = {
                name: name,
                age: age,
                sex: sex,
                run: function () {
                    console.log(this.name);
                }
            }
            return obj;
        }
        console.log(createObject('张三',20,'男'));
        console.log(createObject('李四',21,'男'));
        
        //构造函数
        function Constructor(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.run = function(){
               console.log(this.name);
            }
        }
        function Desk() {
            this.run()
        }
        const people = new Constructor('王五',22,'男');
        // const desk = new Desk('王五',22,'男');
        // console.log(Desk.call(people,'1'));
        Desk.call(people,'1','2','3')
        console.log(Desk);
        // console.log(people.age);
        // people.run()
    </script>


</body>

</html>